/*
  学习目标：核心概念-不可变数据
*/

import React, { Component } from 'react';

export default class App extends Component {
  state = {
    list: [1, 2, 3],
  };

  handelAdd = () => {
    // 💥 不允许改变原始数据， ✅只能新值覆盖旧值
    // push concat等会改变原始数组的方法，都不能在react中更新state
    // this.state.list.push(4);

    this.setState({
      list: [4, ...this.state.list],
    });
  };

  render() {
    return (
      <div>
        <button onClick={this.handelAdd}>点我+4</button>
        {this.state.list.map((item, index) => (
          <h1 key={index}>{item}</h1>
        ))}
      </div>
    );
  }
}
